<!-- 首页 -->
<template>
  <div id="index">
    <!-- 头部地址栏和信息 -->
    <header>
        <div class="head_main">
            <!-- 头部1 -->
            <div class="head_1" :style="'background:rgba(79,206,89,'+topapl+')'">
                <!-- <i class="el-icon-location-outline"></i> -->
                <img :src="locateIcon" alt="" class="img_1">
                <span>南京市</span>
                <img :src="downIcon" alt="" class="img_2">
                <span class="logoIcn logoIcnM1" :class="{logoIcnM2:iconflag}">
                    <img :src="messageIcon" alt="" class="img_3">
                    <i class="el-icon-search"></i>
                </span>
            </div>
            <!-- 头部2 -->
            <div class="head_search1" :style="'background:rgba(79,206,89,'+searchapl+')'">
                <div class="head_search">
                    <p>
                        <img :src="seaIcon" alt="">牛奶
                    </p>
                    </div>
                    <!-- 头部3 -->
                <div class="head_list">
                    <p>农鲜生</p>
                    <p>酸奶</p>
                    <p>牛奶</p>
                    <p>绿萝</p>
                    <p>香菜</p>
                    <p>饼干</p>
                    <p>花生酱</p>
                    <p>花瓶</p>
                </div>
            </div>
        </div>
        <!-- 头部活动图 -->
        <div class="head_img">
            <img :src="seaIcon" alt="">
        </div>
    </header>


    <div class="indexMain">
      <!-- 商品广告图1 -->
      <a href="#">
        <img :src="advertisement" class="advertisement">
      </a>
      <!-- 商品广告图2 -->
      <a href="#">
        <img :src="advertisement1" class="advertisement1">
      </a>
      <!-- 中间小圆圈主题 -->
      <div class="indexMidItems">
        <ul class="indexMidItemsList">
          <li v-for="(itemList,index) in itemLists" :key="index">
            <a href="#" class="indexMidItemsListTxt">
              <img :src="apiUrl+'/'+itemList.indexMidItemsListImg">
              <p>{{itemList.indexMidItemsListTxt}}</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 中间轮播图 -->
      <div class="swiper-container  swiper-container1">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(swiperList,index1) in swiperLists" :key="index1">
            <img :src="apiUrl+'/'+swiperList.indexSwiperImg">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <!-- 两个活动 -->
      <div class="indexEvent">
        <div v-for="(eventImg,index2) in eventImgs" :key="index2">
          <img :src="apiUrl+'/'+eventImg.img">
        </div>
      </div>
      <!-- 四个活动 -->
      <div class="indexAct">
        <ul class="indexActLists">
          <li class="indexActList" v-for="(actList,index3) in actLists" :key="index3">
            <a href="#" class="indexActContent">
              <h3>{{actList.atitle}}</h3>
              <span>{{actList.adesc}}</span>
              <img :src="apiUrl+'/'+actList.aimg">
            </a>
          </li>
        </ul>
      </div>
      <!-- 第二个轮播图 -->
       <div class="swiperTxt">
        <div class="swiperTxt1">秒杀</div>
        <div class="swiperTxt2">限时抢购</div>
        <a href="#">更多
          <img src="/static/seckill-right.png" alt="">
        </a>
      </div>
      <div class="swiper-container swiper-container2">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide2" v-for="(secondSwiper,index4) in secondSwipers" :key="'sec_'+index4">
            <router-link to="/merdetails">
              <div>
                <img :src="apiUrl+'/'+secondSwiper.simg">
                <p class="spmktName">{{secondSwiper.sname}}</p>
              </div>
              <p class="spmktNowPrice">
                ￥
                <i>{{secondSwiper.snowPrice}}</i>
              </p>
              <p class="spmktPastPrice">
                ￥
                <i>{{secondSwiper.spastPrice}}</i>
              </p>
            </router-link>
          </div>
          <div class="swiper-slide swiper-slide2 seeMore">
            <a href="#">查看更多</a>
          </div>
        </div>
      </div> 
      <!-- 第三个轮播图 -->
       <div class="swiper-container  swiper-container3">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(thirdSwiper,index5) in thirdSwipers" :key="index5">
            <img :src="apiUrl+'/'+thirdSwiper.timg">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div> 
      <!-- 附近的店 -->
      <div class="shops">附近的店铺</div>
      <div class="shopBox">
        <MeScrollVue :up="msUp" @init="msInit">
          <ul class="shopContent" v-for="shopList in shopLists" :key="shopList.id">
            <li class="shopDesc">
              <div class="shopDesco">
                <router-link :to="{name:'shop',params:{shopid:shopList.id,shopimg:shopList.shopImg}}">
                  <div class="shopImg">
                    <a href="#">
                      <img :src="apiUrl+'/'+shopList.shopImg" alt="">
                    </a>
                  </div>
                </router-link>
                <div>
                  <div class="shopTxt">
                    <a href="#">
                      <div class="shopName">
                        <router-link :to="{name:'shop',params:{shopid:shopList.id,shopImg:shopList.shopImg,shopName:shopList.shopName,shopTime:shopList.shopTime}}">
                          <h2>{{shopList.shopName}}</h2>
                        </router-link>
                        <div class="shopRank">
                          <img src="/static/2.png">
                        </div>
                      </div>
                      <div class="shopScores">
                        <p class="shopScoresDesc">
                          <span>{{shopList.shopStar}}</span>
                          <span>{{shopList.shopScores}}</span>
                          <span class="shopscount">月售{{shopList.shopscount}}</span>
                        </p>
                        <p class="shopDistance">
                          <span>{{shopList.shopTime}}分钟</span>
                          <span>|</span>
                          <span>{{shopList.shopDistance}}km</span>
                        </p>
                      </div>
                      <div class="shopsPost">
                        <p>起送¥{{shopList.shopsPostBeginP}} | 基础运费¥{{shopList.shopPostBaseP}}</p>
                        <p class="shopsExpress">达达专送</p>
                      </div>
                    </a>
                  </div>
                  <div class="shopDescb">
                    <el-collapse v-model="activeNames" @change="handleChange">
                      <el-collapse-item v-for="indexvc in indexvch" :key="indexvc.id" :name="indexvc.id">
                          <template slot="title">
                            <i class="voucher">领券</i>8.8折券,立减10元,立减5.5...
                          </template>
                        <ul>
                          <li class="shopscheap" v-for="(shopyh,index6) in shopList.shopCheap" :key="index6">
                            <i v-if="shopyh.type=='领券'" class="voucher">{{shopyh.type}}</i>
                            <i v-else-if="shopyh.type=='返券'" class="returnV">{{shopyh.type}}</i>
                            <i v-else-if="shopyh.type=='满减'" class="fullReduce">{{shopyh.type}}</i>
                            <i v-else-if="shopyh.type=='运费'" class="freight">{{shopyh.type}}</i>
                            <span>{{shopyh.desc}}</span>
                          </li>
                        </ul>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </div>
              </div>
              </li>
          </ul>
        </MeScrollVue>
      </div>
      <div class="load"></div>
      <bnav active="index"></bnav>
      <router-view></router-view>
    </div> 
  </div>
</template>
<script>
import bnav from "@/components/Bnav.vue";
import $ from "jquery";
import MeScrollVue from "mescroll.js/mescroll.vue";
import "mescroll.js/mescroll.min.css";
//中间轮播图
$(function() {
  let swiper = new Swiper(".swiper-container1", {
    autoplay: 2000,
    loop: true,
    pagination: ".swiper-pagination",
    autoplayDisableOnInteraction: false
  });
  //第二个轮播图
  let swiper1 = new Swiper(".swiper-container2", {
      autoplay: 2000,
    slidesPerView: 4.3,
    paginationClickable: true,
    spaceBetween: 40
  });
  // 第三个轮播图
  let swiper2 = new Swiper(".swiper-container3", {
    pagination: ".swiper-pagination"
  });
  //上下箭头的切换
  $("#messageHidden").click(function() {
    $(this).toggleClass("fa fa-angle-up");
    $(this).toggleClass("fa fa-angle-down");
  });
});
export default {
  props: ["shopid", "shopImg", "shopName", "shopTime"],
  data() {
    return {
      activeNames: ["1"],
      topapl: 1,
      searchapl: 1,
      iconflag: false,
      locateIcon: "/static/index_icon_locate.png",
      downIcon: "/static/index_icon_down.png",
      messageIcon: "/static/index_icon_message.png",
      seaIcon: "/static/index_icon_sea.png",
      advertisement: "/static/2.jpg",
      advertisement1: "/static/1.gif",
      mescroll: null,
      itemLists: [],
      swiperLists: [],
      eventImgs: [],
      actLists: [],
      secondSwipers: [],
      thirdSwipers: [],
      shopLists: [],
      indexvch: [],
      msUp: {
        callback: () => {
          this.getItemList();
        }
      }
    };
  },
  created() {
    this.getItemList();
  },
  mounted() {
    window.onscroll = () => {
      let scrollTop;
      //安卓手机获取滚动条
      if (document.documentElement.scrollTop != undefined) {
        scrollTop = document.documentElement.scrollTop;
      } else if (window.pageYOffset != undefined) {
        //苹果手机获取滚动条
        scrollTop = window.pageYOffset;
      } else {
        //低版本浏览器，获取滚动条
        scrollTop = window.body.scrollTop;
      }
      let bz = 0;
      if (scrollTop <= 150) {
        bz = scrollTop / 150;
      } else {
        bz = 1;
      }
      this.topapl = bz;
      this.searchapl = 1 - bz;
      if (bz > 0.2) {
        this.iconflag = true;
      } else {
        this.iconflag = false;
      }
    };
  },
  methods: {
    handleChange(val) {
    },
    msInit(mescroll) {
      this.mescroll = mescroll;
    },
    //下拉刷新，上拉加载
    loadMore() {
      this.getItemList();
    },
    //获取中间圆圈主题的数据
    getItemList() {
      this.axios.get("/item/list").then(res => {
        if (res.data.error == 0) {
          this.mescroll.endSuccess();
          this.itemLists = res.data.indexMidItemsLists;
          this.swiperLists = res.data.indexSwiper;
          this.eventImgs = res.data.eventData;
          this.actLists = res.data.actData;
          this.secondSwipers = res.data.secondSwiper;
          this.thirdSwipers = res.data.thirdSwiper;
          this.shopLists = this.shopLists.concat(res.data.shop);
          this.indexvch = res.data.indexvch;
        } else {
          this.mescroll.endError();
        }
      });
    }
  },
  components: {
    bnav,
    MeScrollVue
  }
};
</script>
<style>
.m {
  padding-top: -150px !important;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
}
.index {
  position: relative;
}
/*头部地址和信息栏的样式*/
/* 头部1 */
.head_1 {
  color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

.img_1 {
  width: 4%;
  margin-left: 12px;
  margin-bottom: -2px;
}

.img_2 {
  width: 2%;
  margin-bottom: 3px;
}
.logoIcn {
  float: right;
  position: relative;
}
.logoIcnM1 {
  margin-right: -40px;
  transition-duration: 1s;
}

.logoIcnM2 {
  margin-right: 2px;
  transition-duration: 1s;
}

.logoIcn img {
  width: 25%;
  position: absolute;
  top: 9px;
  margin-left: 22px;
}

.logoIcn .el-icon-search {
  font-size: 21px;
  top: 12px;
  margin-left: 60px;
}

.head_1 span {
  width: 25%;
  /* height: 44px; */
  font-size: 16px;
  line-height: 44px;
  /* border: 1px solid black; */
}

/* 头部input框 */
.head_search1 {
  padding-top: 44px;
  /* border: 1px solid red; */
}

.head_search {
  width: 95%;
  margin-left: 10px;
  background-color: #fff;
  color: #999;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  /* border: 1px solid black; */
  border-radius: 17px;
}

.head_search img {
  width: 4.3%;
  /* margin-right: 5px; */
  margin-bottom: -2px;
}

/* 头部3 */
.head_list {
  width: 93%;
  /* height: 3rem; */
  margin-top: 10px;
  margin-left: 7px;
  padding-bottom: 10px;
  color: #fff;
  font-size: 12px;
  display: flex;
  /* border: 1px solid black; */
  justify-content: space-around;
}

/* 头部活动图 */
.head_img {
  height: 84.63px;
  /* border: 1px solid black; */
}

.head_img img {
  width: 100%;
  height: 100%;
}

.indexMain {
  width: 100%;
  position: absolute;
  top: 6.875rem;
}
/*广告位样式*/
.advertisement {
  width: 100%;
  height: 6.125rem;
}
.advertisement1 {
  width: 100%;
  height: 6.125rem;
}
/*中间小圆圈主题*/
.indexMidItems {
  height: 9.625rem;
  width: 100%;
}
.indexMidItemsList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.indexMidItemsList li {
  width: 17%;
}
.indexMidItemsListTxt {
  font-size: 0.75rem;
  color: black;
}
.indexMidItemsListTxt p {
  width: 3rem;
  text-align: center;
}
.indexMidItemsListTxt img {
  width: 2.5rem;
  height: 2.5rem;
}
/*轮播图的样式*/
.swiper-container1 {
  width: 94%;
  height: 5rem;
}
.swiper-container1 img {
  height: 5rem;
}
/*中间两个活动*/
.indexEvent {
  width: 100%;
  height: 6.8125rem;
  display: flex;
}
.indexEvent div {
  width: 50%;
}
.indexEvent img {
  height: 6.8125rem;
}
/*四个活动*/
.indexAct {
  width: 100%;
  height: 8.06rem;
  margin-top: 0.4rem;
}
.indexActLists {
  width: 94%;
  height: 8rem;
  display: flex;
  margin: 0.13rem auto;
}
.indexActList {
  width: 4.5rem;
  height: 8rem;
  background-color: #faf9f9;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
.indexActList a {
  display: block;
  margin-top: 0.7rem;
}
.indexActList h3 {
  font-size: 0.875rem;
  color: black;
  font-weight: normal;
  text-align: center;
}
.indexActList span {
  display: block;
  font-size: 0.875rem;
  color: #ff5757;
  text-align: center;
}
.indexActList img {
  width: 3.75rem;
  height: 3.75rem;
  margin-top: 0.8rem;
  margin-left: 0.4rem;
}
/*第二个轮播图*/
.swiperTxt {
  width: 100%;
  height: 2rem;
  display: flex;
}
.swiperTxt1 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ff5757;
  margin-left: 0.5rem;
}
.swiperTxt2 {
  font-size: 0.8rem;
  font-weight: 700;
  width: 5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  color: white;
  background-color: #ff5757;
  margin: 0.25rem 0 0 0.5rem;
  border-radius: 3rem 1.5rem 1.5rem 0;
}
.swiperTxt a {
  width: 3rem;
  height: 1.1rem;
  display: block;
  color: #ff5757;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  margin-left: 8rem;
}
.swiperTxt img {
  width: 0.5rem;
  margin-right: 0;
}
.swiper-container2 {
  height: 6.4375rem;
  margin-left: 0.675rem;
}
.swiper-slide2 a {
  display: block;
  width: 3.87rem;
  height: 6.25rem;
  position: relative;
}
.swiper-slide2 img {
  width: 3.875rem;
  height: 3.875rem;
}
.spmktName {
  font-size: 0.5625rem;
  position: absolute;
  z-index: 10;
  top: 3rem;
  width: 3.875rem;
  height: 0.8rem;
  line-height: 0.6875rem;
  text-align: center;
  background: rgba(255, 87, 87, 0.6);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0.8rem;
}
.spmktNowPrice {
  width: 3.875rem;
  height: 1.375rem;
  color: #ff5757;
  font-size: 0.75rem;
  text-align: center;
  margin-top: -0.5rem;
}
.spmktNowPrice i {
  font-size: 1rem;
  font-weight: 900;
}
.spmktPastPrice {
  font-size: 0.75rem;
  color: #999;
  width: 3.875rem;
  height: 1.375rem;
  text-align: center;
}
.spmktPastPrice i {
  text-decoration: line-through;
}
.seeMore {
  padding-left: 20px;
  font-size: 0.8rem;
  color: #999;
  display: flex;
  background-image: url("/static/seckill-more.png");
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position-y: 1.8rem;
}
/*第三个轮播图*/
.swiper-container3 {
  width: 94%;
  height: 5rem;
}
.swiper-container3 img {
  height: 5rem;
}
/*附近的店铺*/
.shops {
  width: 100%;
  height: 4.5rem;
  padding-left: 0.625rem;
  padding-top: 1.8rem;
  border-bottom: 1px solid #d9d9d9;
  font-weight: 700;
  font-size: 1.4rem;
  color: #333;
}
.shopBox {
  width: 100%;
}
.shopContent {
  height: auto;
  border-bottom: 0.0625rem solid #d9d9d9;
  padding: 1rem 0rem;
}
.shopTxt {
  border-bottom: 0.0625rem solid #ddd;
  padding-bottom: 0.5rem;
}
.shopDesc {
  width: 100%;
  height: auto;
  padding: 0.9375rem 0.625rem;
}
.shopDesco {
  display: flex;
}
.shopImg {
  width: 4.5rem;
  height: 100%;
}
.shopImg img {
  width: 3.875rem;
  height: 3.875rem;
  border: 1px solid #d9d9d9;
}
.shopName,
.shopScores,
.shopsPost {
  width: 14.125rem;
  height: 1.25rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.shopName h2 {
  font-size: 0.9375rem;
  color: #333;
  font-weight: 400;
}
.shopRank {
  width: 1.125rem;
}
.shopRank img {
  width: 1rem;
}
.shopScoresDesc {
  font-size: 0.75rem;
  color: #ffac1b;
}
.shopscount {
  color: #999;
}
.shopDistance {
  font-size: 0.75rem;
  color: #999;
}
.shopsPost p {
  font-size: 0.75rem;
  color: #999;
}
.shopsPost .shopsExpress {
  border: 1px solid #16a9ff;
  padding: 0.0625rem;
  color: #16a9ff;
}
.shopDescb {
  width: 14.125rem;
  height: auto;
  color: #666;
  display: flex;
  justify-content: space-between;
}
.shopDescb ul {
  width: 12.7125rem;
  height: auto;
  overflow: hidden;
}
.shopscheap {
  margin-top: 0.3125rem;
  width: 100%;
  height: auto;
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voucher,
.fullReduce,
.returnV,
.freight {
  background-color: #ff6c57;
  padding: 0 0.125rem;
  padding-right: 0.4rem;
  margin-right: 0.25rem;
  border-radius: 0.125rem;
  color: #ffffff;
  height: 0.875rem;
  width: 1.75rem;
  text-align: center;
  line-height: 0.875rem;
  font-size: 0.6875rem;
}
.fullReduce {
  background-color: #5fbc65;
}
.freight {
  background-color: #5ca7ff;
}
.returnV {
  background-color: #ffa800;
}
.load {
  margin-bottom: 2.5rem;
}
</style>

